<template>
  <div id="">
    <el-button type="success" @click="findInCart" style="margin-top: 10px;margin-left: 60%">购物车</el-button>

    <div style="width: 80%;margin-left: 10%;height: 500px">
      <div style="display: inline;width: 80%">
        <ul style="width: 100%;height: 40px;color: #f3e7e7;font-size: 25px">
          <li v-for="item in categoryList"
              :key="item.id"
              style="flex-direction:row;
              height: 40px;cursor: pointer;
              list-style: none;
              float: left;
              background: #3b3838;
              width: 10%;
              vertical-align:middle;
              margin-left: 10px;
              text-align: center;
              border-radius: 10px;"


              @click="getFoodByCategoryId(item.id)"
          ><a>{{ item.cname }}</a>
          </li>
        </ul>
      </div>


      <el-table
        :data="foodList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        height="650"
        style="width: 100%;font-size: 24px ;color: #8c9a51;">

        <el-table-column
          prop="id"
          label="id"
          width="180" v-if="false">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="url"
          label="图片"
          style="height: auto"
          width="350">
          <template #default="scope">
            <el-image :src="scope.row.url" width="80" height="80"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="info"
          label="信息"
          width="250">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="180">
        </el-table-column>
        <el-table-column
          prop=""
          label="想吃"
          width="200">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入名称搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button type="primary" plain @click="open(scope.row.id,scope.row.name,scope.row.price)">加入购物车</el-button>
          </template>
        </el-table-column>

      </el-table>


      <el-dialog title="购物车" :visible.sync="dialogTableVisible">
        <el-table :data="getShoppingCart">
          <el-table-column property="fid" label="id" width="150" v-if="false"></el-table-column>
          <el-table-column property="fname" label="名称" width="200"></el-table-column>
          <el-table-column property="fprice" label="价格"></el-table-column>
          <el-table-column property="fcount" label="数量"></el-table-column>
          <el-table-column property="fsum" label="小计"></el-table-column>
          <el-table-column property="" label="删除">
            <template slot-scope="scope">
              <el-button type="warming" icon="el-icon-delete" @click="deleteFood(scope.row.fid)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="text" @click="openClear" v-if="getShoppingCart.length!==0">清空购物车</el-button>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                 v-if="getShoppingCart.length!==0">
          <el-form-item label="配送时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="datetime"
                                placeholder="选择日期"
                                v-model="ruleForm.date1"
                                :picker-options="pickerOptionsStart"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="备注信息" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">创建订单</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
  </div>
</template>


<script>
import Qs from 'qs'
import User from "./User";

export default {
  name: "Index",
  data() {
    return {
      addr: User.data().userVo.addr,
      search: '',
      pickerOptionsStart: {
        disabledDate: (time) => {
          // if (this.form.endTime) {
          //   return (
          //     time.getTime() < Date.now() - 8.64e7 ||
          //     time.getTime() > this.form.endTime
          //   );
          // }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      ruleForm: {
        date1: '',
        desc: ''
      },
      rules: {

        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        desc: [
          {required: false, message: '请填备注信息', trigger: 'blur'}
        ]
      },
      orderVo: {
        time: '',
        info: ''
      },
      dialogTableVisible: false,
      //获取购物车
      getShoppingCart: [{
        fid: '',
        fname: '',
        fprice: '',
        fcount: '',
        fsum: ''
      }],
      //加入购物车
      shoppingCart: {
        fId: '',
        fName: '',
        fPrice: '',
        fCount: ''
      },
      categoryList: [
        {id: '', cname: ''}
      ],
      foodList: [
        {
          id: '',
          info: '',
          price: '',
          url: '',
          name: ''
        }
      ]

    }
  },
  methods: {
    getInfo() {
      this.$axios({
        method: 'get',
        url: '/user/info',
      }).then(res => {
        this.addr = res.data.data.data.addr
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.orderVo.time = this.ruleForm.date1
          this.orderVo.info = this.ruleForm.desc
          //调用生成订单
          this.toOrder()
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //结算
    toOrder() {
      this.$axios({
        method: 'post',
        url: '/order/toOrder',
        data: this.orderVo
      }).then(res => {
        this.$router.push('/Order')
      })
    },
    deleteFood(id) {
      this.$axios({
        method: 'delete',
        url: '/shopping/deleteFood',
        params: {
          id
        }
      }).then(res => {
        this.findInCart()
      })
    },
    openClear() {
      this.$confirm('确定要清空吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.clearCart()
        this.$message({
          type: 'success',
          message: '已清空!'
        });
        this.getShoppingCart = ''
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    clearCart() {
      this.$axios({
        method: 'delete',
        url: '/shopping/clearCart'
      })
    },
    findInCart() {
      this.$axios({
        method: 'get',
        url: '/shopping/findInCart'
      }).then(res => {
        console.log("获取到购物车" + res.data.data)
        this.getShoppingCart = res.data.data.data
      })
      this.dialogTableVisible = true
    },
    takeInCart(value, fId, fName, fPrice) {
      this.$axios({
        method: 'post',
        url: '/shopping/takeInCart',
        data: {
          name: fName,
          price: fPrice,
          id: fId,
          count: value
        }
      })
    },
    open(fId, fName, fPrice) {
      this.$prompt('请输入购买的数量', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
        inputErrorMessage: '超过最大数量或输入错误'
      }).then(({value}) => {
        this.$message({
          type: 'success',
          message: '加入: ' + fName + '  数量: ' + value
        });
        this.takeInCart(value, fId, fName, fPrice)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        });
      });
    },
    getFoodByCategoryId(id) {
      console.log(id)
      this.$axios({
        method: 'get',
        url: '/food/getFoodListByCategoryId',
        params: {
          id
        }
      }).then(res => {
        console.log(res.data.data.data)
        this.foodList = res.data.data.data
      })
    },
    getList() {
      this.getInfo()
      this.$axios({
        method: "get",
        url: '/category/findAll',
      })
        .then(res => {
          console.log(res.data.data)
          this.categoryList = res.data.data.data
        })
      this.getFoodByCategoryId(1)
    }
  },
  created() {
    this.getList()
    this.getFoodByCategoryId(1)
  }
}
</script>

<style>

#building {
  background: url("https://ghxt-atlbb.oss-cn-zhangjiakou.aliyuncs.com/image/banner1653650523000.jpg") no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

/*最外层透明*/
.el-table, .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent;
}

</style>
